(function ($) {

  // 创建服务项目项
  let createServiceItem = function (item) {
    var servicesItem = $('<div>').addClass('services-item');
    var servicesBox = $('<div>').addClass('services-box');
    // 创建图标  
    var servicesIcon = $('<div>').addClass('services-icon');
    var iconImg = $('<img>').attr('src', item.icon).attr('alt', '');
    servicesIcon.append(iconImg);
    // 创建内容  
    var servicesContent = $('<div>').addClass('services-content');
    var titleLink = $('<a>').attr('href', item.detailUrl).text(item.title);
    var title = $('<h3>').append(titleLink);
    var contentP = $('<p>').text(item.content);
    var viewDetailLink = $('<a>').addClass('view-detail').attr('href', item.detailUrl).attr('target','_blank').text('查看详情');
    var addCircleIcon = $('<i>').addClass('icon ion-md-add-circle-outline');
    viewDetailLink.append(addCircleIcon);
    servicesContent.append(title).append(contentP).append(viewDetailLink);
    // 组装所有部分  
    servicesBox.append(servicesIcon).append(servicesContent);
    servicesItem.append(servicesBox);
    return servicesItem;
  }

  // 创建新闻项
let createNewsItem = function (item) {
  var $col = $('<div class="col-md-4 col-sm-6 col-xs-12"></div>');
  var $article = $('<article class="post-box post type-post entry"></article>');
  var $entryMedia = $('<div class="entry-media"></div>');
  var $imgLink = $('<a href="' + item.link + '" target="_blank"></a>');
  var $img = $('<img src="' + item.image + '" target="_blank">');
  $imgLink.append($img);
  $entryMedia.append($imgLink);
  var $innerPost = $('<div class="inner-post"></div>');
  var $entryHeader = $('<header class="entry-header"></header>');
  var $entryMeta = $('<div class="entry-meta"></div>');
  var $postedOn = $('<span class="posted-on"></span>');
  var $entryDate = $('<span class="entry-date published">' + item.date + '</span>');
  var $postedIn = $('<span class="posted-in"></span>');
  var $categoryLink = $('<a href="'+ item.link +'" rel="category tag" target="_blank">' + item.category + '</a>'); // Modify href as needed
  $postedOn.append($entryDate);
  $postedIn.append($categoryLink);
  $entryMeta.append($postedOn).append($postedIn);
  var $entryTitle = $('<h3 class="entry-title"><a href="' + item.link + '" rel="bookmark" target="_blank">' + item.title + '</a></h3>');
  $entryHeader.append($entryMeta).append($entryTitle);
  var $entrySummary = $('<div class="entry-summary"><p>' + item.summary + '</p></div>');
  var $entryFooter = $('<footer class="entry-footer"></footer>');
  var $postLink = $('<a class="post-link" href="' + item.link + '" target="_blank">查看更多<i class="icon ion-md-add-circle-outline"></i></a>');
  $entryFooter.append($postLink);
  $article.append($entryMedia).append($innerPost.append($entryHeader).append($entrySummary).append($entryFooter));
  $col.append($article);
  return $col;
  }
  
// 创建列表
let createList = function (json, containerId, createItemFunction) {
  if (json.code === 0) {
    let list = json.data;
    $.each(list, function (index, item) {
      $('#' + containerId).append(createItemFunction(item));
    });
  } else {
    alert(json.msg);
  }
  };
  
  // 通用的AJAX请求函数
  let fetchData = function (url, successCallback) {
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'json',
      async: false,
      success: successCallback,
      error: function (xhr, status, error) {
        alert("从接口和本地获取项目列表信息都失败了");
        console.log(xhr);
        console.log(status);
        console.log(error);
      }
    });
  };

  // 从本地获取项目列表
  let projectListLocal = function () {
    fetchData('json/projectList.json', function (data) {
      createList(data, 'services-container', createServiceItem);
    });
  };

  // 从本地获取新闻列表
  let newsListLocal = function () {
    fetchData('json/newsList.json', function (data) {
      createList(data, 'newsItem', createNewsItem);
    });
  };

  projectListLocal();
  newsListLocal();

}(jQuery));





